<template>
  <view class="loan-list-box">
    <Address  @changeCity="changeCity"/>
    <Search @dokeyWord="dokeyWord"/>
    <view class="loan-item-box">
      <Nav />
     <Swiper />
      <LoanCondition />
      <Screening></Screening>
      <view class="loan-item" v-for="(item, index) in loanList"  :key="index" @tap="toDetail(item)">
      <view class="loan-item-head">
        <view class="loan-item-head-left">
          <view class="loan-item-logo">
            <image :src="item.corporationImgUrl"></image>
          </view>
          <view class="loan-item-title">
            <text class="loan-item-title-text">{{ item.productName }}</text>
            <text class="loan-item-title-desc">{{ item.productSlogan }}</text>
          </view>
        </view>
        <view class="loan-item-head-right">
          {{item.productCategoryName}} | {{ item.productSubCategoryName }}
        </view>

      </view>
      <view class="loan-item-content">
        <view class="loan-item-quota">
          <text class="loan-item-quota-num">{{ item.maxQuota }}</text>
          <text>万</text>
        </view>
        <view class="loan-item-detail">
          <text>年化利率：{{item.rateRange}}</text>
          <text>还款方式：{{item.newRepaymentType}}</text>
          <text>贷款期限：{{ item.maxPeriods }}期</text>
        </view>
      </view>
    </view>
    </view>
  </view>
</template>

<script>
import prodApi from '@/api/prodApi'
import ajaxApi from '@/api/ajax'
import passData from '@/api/requstUtil'
import Search from "./Search"
import Swiper from "./Swiper"
import Address from "./Address"
import Nav from "./Nav"
import Screening from "./Screening"
import LoanCondition from "./LoanCondition"
import dicts from '../../../common/js/dicts'


export default {
  components:{ Search, Swiper, Address, Nav, LoanCondition, Screening },
  data() {
    return {
      queryParam: {
        productType: 'LOAN'
      },
      repaymentMethod:{
        '01':'等额本息',
        '02':'先息后本',
        '03':'随借随还',
        '04':'等额本金',
        '05':'等本等息',
        '06':'按日计息',
        '07':'后息后本',
        '08':'组合还款',
        '09':'一次性还本付息',

      },
      loanList: [
      ],
      productCategory: [],
      prodSub: []
    }
  },
  async mounted() {
    await this.queryBySysDictNos()
    await this.getList();
  },

  methods: {
    async queryBySysDictNos() {
      try {
        const res = await ajaxApi.postQueryBySysDictNos({ dictNos: dicts.dictNos });
        let data = passData(res); 
        if (data) {
        wx.setStorageSync("dictNos",data)
        console.log('dictNos', data)
        this.productCategory = data.filter(item=>item.dictNo === 'product_category')[0].childList
        let prodSubCarLoan = data.filter(item=>item.dictNo === 'prod_sub_car_loan')[0].childList
        let prodSubCarEnterprise = data.filter(item=>item.dictNo === 'prod_sub_enterprise')[0].childList
        let prodSubCarPersonal = data.filter(item=>item.dictNo === 'prod_sub_personal')[0].childList
        this.prodSub = [...prodSubCarLoan, ...prodSubCarEnterprise,...prodSubCarPersonal ]
        console.log('prodSub', this.prodSub)
        }
      } catch (e) {
        console.log(e);
      }
    },
    dokeyWord(data) {
      console.log('贷款',data)
    },
    changeCity(data) {
     console.log('贷款地址', data)
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/index/product/LoanDetail',
        success: (res) => {
          res.eventChannel.emit('getItem', item)
        }
      });
    },
    getList() {
      prodApi.queryList(this.queryParam).then(res => {
        this.loanList = (passData(res)||{}).list;
        console.log('3456', this.loanList)
        this.loanList.forEach(ele => {
          let {maxRate, minRate, interestRateType, repaymentType, productCategory, productSubCategory} = ele
         
          if(productCategory) {
            ele.productCategoryName = this.productCategory.filter(item=>item.dictNo === productCategory)[0].dictName
          }
          if(productSubCategory) {
            ele.productSubCategoryName = this.prodSub.filter(item=>item.dictNo === productSubCategory)[0].dictName
          }
          console.log('ele',  ele.productSubCategoryName);
          ele.newRepaymentType = (repaymentType || '').split(',').map(type => {
            return this.repaymentMethod[type]
          }).join(',')
          const convertRate = (rate) => {
            rate = rate || 0
            switch (interestRateType) {
              case 'month':
                return (rate * 12).toFixed(2)+'%'
              case 'month_fee':
                return (rate * 12 * 1.85).toFixed(2)+'%'
              default:
                return rate.toFixed(2)+'%'
            }
          }

          if (maxRate) {
            ele.rateRange = convertRate(minRate) + '-' + convertRate(maxRate)
          } else {
            ele.rateRange = convertRate(minRate) + '起'
          }

        })
      });
    },
    convertData(data) {
      return data.list
    },

  }
}
</script>

<style lang="scss" scoped>

.loan-item-logo uni-image {
  width: 45px;
  height: 45px;
}
.loan-item-box{
  margin-top: -40rpx;
  background: #fff;
  border-top-left-radius: 25rpx;
  border-top-right-radius: 25rpx;
}

.loan-item {
  height: 120px;
  background-color: #FFFFFF;
  margin: 15px 15px 15px 15px;
  border: 2px solid #eee;
  padding: 10rpx;
  border-radius: 20rpx;
}

.loan-item-head {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  padding-top: 3px;
  margin-left: 6px;
}

.loan-item-head-left {
  display: flex;
}

.loan-item-head-right {
  color: #027db4;
  padding-right: 12px;
}

.loan-item-title-text {
  font-weight: bold;
  color: #333;
}

.loan-item-title-desc {
  background-color: #fef3e4;
  color: #f08163;
}

.loan-item-title {
  display: flex;
  flex-direction: column;
}

.loan-item-quota {
  color: #027db4;
  display: flex;
  margin-left: 20px;
  margin-right: 10px;
  flex-direction: row;
  align-items: flex-end;
}

.loan-item-content {
  display: flex;
}

.loan-item-detail {
  font-size: 14px;
  color: #aaaaaa;
  display: flex;
  flex-direction: column;
}

.loan-item-quota-num {
  font-size: 40px;
  font-weight: bold;
}

</style>
